<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="nav">
    <div class="container" style="margin-top: 5px;">
        <nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" th:href="@{/book/index}">智慧书坊</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav pull-left">
                        <li class="active">
                            <a href="index.html" th:href="@{/book/index}"><span class="glyphicon glyphicon-home"></span>&nbsp;首页</a>
                        </li>

                        <li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                图书类型
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="books_list.html" th:href="@{/book/bookList(category=1)}">文学类</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="books_list.html" th:href="@{/book/bookList(category=2)}">经管类</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="books_list.html" th:href="@{/book/bookList(category=3)}">其他类</a>
                                </li>
                                <li class="divider"></li>
                            </ul>
                        </li>
                        <li>
                            <a href="cart.html" th:href="@{/cart/list}"><span class="glyphicon glyphicon-shopping-cart"> </span>&nbsp;我的购物车</a>
                        </li>
                        <li>
                            <a href="order_list.html" th:href="@{/order/list}"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;我的订单</a>
                        </li>
                        <li>
                            <a href="#" id="notifyLink" data-toggle="modal" data-target="#notifyInfoModal">
                                <span class="glyphicon glyphicon-signal"></span>&nbsp;公告信息
                            </a>
                        </li>

                        <li th:if="${session.user != null}">
                            <a th:href="@{/user/userInfo}"><span class="glyphicon glyphicon-user" ></span>&nbsp;个人信息</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a href="javascript:void(0)" th:text=" ${session.user.username}"></a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" data-toggle="modal" data-target="#loginModal">登录</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a th:href="@{/user/logout}">&nbsp;退出</a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" data-toggle="modal" data-target="#register">注册</a>
                        </li>

                    </ul>
                    <div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;width: 234px;">
                        <input type="text" class="form-control" id="inputBookName" placeholder="书名、作者、简介" />
                        <span class="input-group-btn">
					            <button class="btn btn-info btn-search" th:onclick="searchBookName()">
					            	<span class="glyphicon glyphicon-search"></span>
					            </button>
							</span>
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="notifyInfoModal" tabindex="-1" role="dialog" aria-labelledby="notifyInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h2 class="modal-title" id="notifyInfoModalLabel" align="center">促销活动公告</h2>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 促销活动内容 -->
                    <div class="scroll-container">
                        <div class="scroll-content">
                            <!-- 活动详情 -->
                            <p>亲爱的书友们，感谢您一直以来的支持！</p>
                            <p>&nbsp&nbsp&nbsp&nbsp为了回馈您的厚爱，我们即将举办一场盛大的促销活动！
                            活动期间，所有图书均享受8折优惠！还有部分畅销图书更是低至5折！ 此外，凡在活动期间购买满200元的顾客，还可获赠一份精美小礼品！
                            快来参加我们的促销活动，让您的阅读之旅更加愉快！</p><hr>
                            <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp活动时间：2024年4月10日至2024年5月20日</p>
                            <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp地址：XX市XX区XX街道XX号</p>
                            <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp电话：123-456-7890</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            // 绑定点击事件处理函数
            $("#notifyLink").click(function (event) {
                console.log("点击公告信息链接"); // 调试信息：检查是否能正确触发事件

                // 发送请求获取通知数据
                $.get("/user/getAllNotify", function (data) {
                    console.log("获取到通知数据:", data); // 调试信息：检查是否能成功获取数据

                    // 将通知数据填充到模态框中
                    var modalBody = $("#notifyInfoModal .modal-body");
                    modalBody.empty(); // 清空模态框内容

                    // 遍历通知数据，生成HTML代码
                    $.each(data, function (index, notify) {
                        const html =
                            '<div class="scroll-container">' +
                            '<div class="scroll-content">' +
                            '<p>' +
                            notify.notifyTitle +
                            "</p>" +
                            '<p>' +
                            notify.notifyContext +
                            "</p><hr>" +
                            '<p>' +
                            "发布时间：" +
                            notify.notifyCreateDate +
                            "</p>" +
                            "</div>" +
                            "</div>";

                        modalBody.append(html); // 添加到模态框中
                    });
                });
            });
        });

    </script>


    <!-- CSS样式 -->
    <style>
        .scroll-container {
            border: 2px solid #007bff; /* 设置边框样式 */
            border-radius: 10px; /* 设置边框圆角 */
            overflow: hidden; /* 隐藏溢出内容 */
            height: 250px; /* 设置容器的高度 */
            margin: 20px; /* 添加外边距 */
            padding: 5px; /* 添加内边距 */
        }

        .scroll-content {
            animation: scroll 60s linear infinite; /* 滚动动画 */
        }

        @keyframes scroll {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100%);
            }
        }

        /* 修改模态框样式 */
        .modal-content {
            background-color: #f8f9fa; /* 设置背景颜色 */
            border: none; /* 移除默认边框 */
            border-radius: 10px; /* 设置边框圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        .modal-header {
            border-bottom: none; /* 移除头部边框 */
        }

        .modal-footer {
            border-top: none; /* 移除底部边框 */
        }
    </style>
</header>
